<script lang="ts" setup>
import { postPatientConsultPayAPI } from '@/apis/consult'
import { getPatientMedicineOrderPreAPI, postPatientMedicineOrderAPI } from '@/apis/medicine'
import { getPatientOrderAddressAPI } from '@/apis/order'
import type { CustomPaymentInstance } from '@/types/global-components'
import type { MedicineOrderPre } from '@/types/medicine'
import type { Address } from '@/types/order'
import { ref } from 'vue'

//1.收货地址
const addressInfo = ref<Address>()
//用户收货地址
const getPatientOrderAddress = async () => {
  //地址列表接口
  const res = await getPatientOrderAddressAPI()
  //渲染地址列表数据
  addressInfo.value = res.data.find((item) => item.isDefault === 1)
}

getPatientOrderAddress()

//2.获取预支付信息
const props = defineProps<{
  id: string
}>()

//3.获取预支付信息
const orderPre = ref<MedicineOrderPre>()
const getMedicineOrderPre = async () => {
  if (!props.id) return
  const res = await getPatientMedicineOrderPreAPI(props.id)
  orderPre.value = res.data
}

getMedicineOrderPre()

//4.立即支付
const CustomPaymentRef = ref<CustomPaymentInstance>()
const orderId = ref()
//3.1点击立即支付
const handlePay = async () => {
  //判断是否选择收货地址
  if (!addressInfo.value) {
    return uni.showToast({
      title: '请选择收货地址',
      icon: 'none',
    })
  }
  if (!orderId.value) {
    const res = await postPatientMedicineOrderAPI({
      id: props.id,
      addressId: addressInfo.value.id,
      couponId: orderPre.value?.couponId,
    })

    //保存订单ID
    orderId.value = res.data.id
  }

  //打开支付组件
  CustomPaymentRef.value?.open()
}

//3.2 支付渠道确认支付
const handleConfirm = async (index: number) => {
  if (index === 0) {
    uni.showToast({
      title: '微信暂不支持',
      icon: 'none',
    })
  } else if (index === 1) {
    // #ifndef MP-WEIXIN
    const res = await postPatientConsultPayAPI({
      orderId: orderId.value,
      paymentMethod: '1',
      payCallback: 'http://localhost:5173/#/subpkg_medicine/pages/pay_result/pay_result',
    })
    location.href = res.data.payUrl
    // #endif
  }
}

//点击关闭按钮或者遮罩层
const handleClose = () => {
  CustomPaymentRef.value?.close()
}
</script>

<template>
  <scroll-view background-color="#f6f6f6">
    <view class="medicine-page">
      <view class="page-header">
        <view class="order-shippment">
          <view class="region">
            <uni-icons size="16" color="#FF7702" type="location-filled" />
            {{ addressInfo?.province }} {{ addressInfo?.city }}
          </view>
          <view class="detail">{{ addressInfo?.addressDetail }}</view>
          <view class="receiver">
            {{ addressInfo?.receiver }}
            {{ addressInfo?.mobile?.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2') }}
          </view>
        </view>
      </view>

      <view class="order-shop">
        优医药房
        <text class="alt">优医质保 假一赔十</text>
      </view>
      <!-- 药品列表 -->
      <view class="medicine-list">
        <view class="medicine-list-item" v-for="item in orderPre?.medicines" :key="item.id">
          <image class="medicine-cover" :src="item.avatar" mode="aspectFill" />
          <view class="medicine-info">
            <text class="name">{{ item.name }}</text>
            <text class="unit symbol">{{ item.specs }}</text>
            <text class="price">¥{{ item.amount }}</text>
          </view>
          <view class="quantity">x{{ item.quantity }}</view>
          <view class="guide">{{ item.usageDosag }}</view>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <uni-list :border="false">
          <uni-list-item title="药品金额" :right-text="`¥${orderPre?.payment || '0.00'}`" />
          <uni-list-item title="运费" :right-text="`¥${orderPre?.expressFee || '0.00'}`" />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="`-¥${orderPre?.couponDeduction || '0.00'}`"
          />
          <uni-list-item title="实付款" :right-text="`¥${orderPre?.actualPayment || '0.00'}`" />
        </uni-list>
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <view class="total-amount">
          需付款: <text class="number">¥{{ orderPre?.actualPayment || '0.00' }}</text>
        </view>
        <view class="buttons">
          <button class="uni-button" @click="handlePay">立即支付</button>
        </view>
      </view>
    </view>
    <custom-payment
      ref="CustomPaymentRef"
      v-if="orderPre"
      :order-id="orderPre?.id"
      :amount="orderPre?.actualPayment"
      @close="handleClose"
      @confirm="handleConfirm"
    />
  </scroll-view>
</template>

<style lang="scss">
@import './index.scss';
</style>
